<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
  <style>
    /*我想把ol里面的li选出来改为pink*/
    ol li{
      color: pink;
    }
    ol li a{
      color: red;
      text-decoration: none;
    }
    .nav li a{
      color: yellow;
    }
    .niv > a{
      color: blue;
    }
  </style>
</head>
<body>
<!--后代选择器-->
<ol>
  <li>我是ol的孩子</li>
  <li><a href="#">大孙子</a></li>
</ol>

<ul>
  <li>我是ul的孩子</li>
  <li>我是ul的孩子</li>
  <li>我是ul的孩子</li>
  <li>我是ul的孩子</li>
  <li><a href="#">大孙子</a></li>
</ul>

<ul class="nav">
  <li>我是ul的孩子</li>
  <li>我是ul的孩子</li>
  <li>我是ul的孩子</li>
  <li>我是ul的孩子</li>
  <li><a href="#">大孙子</a></li>
</ul>

<!--子选择器-->
<div class="niv">
  <a href="#">儿子</a>
  <p>
    <a href="">孙子</a>
  </p>
</div>
</body>
</html>